<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击按钮显示图片</title>
    <style>
        #pic{
            width: 300px;
            border:solid 1px red;
            margin: 0 auto;
        }
        #pic>.pic>img{
            width: 300px;
        }
        #btn>input{
            margin: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="pic">
        <div class="pic">
            <img src="pictures/1.png" alt="无法显示该图片">
        </div>
        <fieldset>
        <legend style="text-align: center">点击按钮更换美图</legend>
        <div id="btn">
            <label for="pic1"></label><input type="radio" name="pic" id="pic1" value="1" checked>first
            <label for="pic2"></label><input type="radio" name="pic" id="pic2" value="2">second
            <label for="pic3"></label><input type="radio" name="pic" id="pic3" value="3">third
            <label for="pic4"></label><input type="radio" name="pic" id="pic4" value="4">forth
        </div>
    </fieldset>
    </div>
    <script>
        var btn_1=document.getElementById("pic1")
        var btn_2=document.getElementById("pic2")
        var btn_3=document.getElementById("pic3")
        var btn_4=document.getElementById("pic4")
        btn_1.onclick=function (){
            // 两种写法,写一种即可实现相关功能
            document.getElementsByTagName("img")[0].src="pictures/1.png"
            document.getElementsByTagName("img")[0].setAttribute(src,"pictures/1.png")
        }
        btn_2.onclick=function (){
            // 同上
            document.getElementsByTagName("img")[0].src="pictures/2.png"
            document.getElementsByTagName("img")[0].setAttribute(src,"pictures/2.png")
        }
        btn_3.onclick=function (){
             // 同上
            document.getElementsByTagName("img")[0].src="pictures/3.png"
            document.getElementsByTagName("img")[0].setAttribute(src,"pictures/3.png")
        }
        btn_4.onclick=function (){
             // 同上
            document.getElementsByTagName("img")[0].src="pictures/4.png"
            document.getElementsByTagName("img")[0].setAttribute(src,"pictures/4.png")
        }

    </script>
</body>
</html>